<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>货物列表</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="/assets/favicon.ico">

    <script defer src="/assets/js/jquery-2.1.4.js"></script>
    <!-- FontAwesome JS-->
    <script defer src="/assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">

</head>

<body class="app">
<header th:replace="template.html::header"></header><!--//app-header-->

<div class="app-wrapper">
    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <div class="row g-3 mb-4 align-items-center justify-content-between">
                <div class="col-auto">
                    <h1 class="app-page-title mb-0">货物列表</h1>
                </div>
                <div class="col-auto">
                    <div class="page-utilities">
                        <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                            <div class="col-auto">
                                <form class="docs-search-form row gx-1 align-items-center" method="get"
                                      action="/ms/goods/name">
                                    <div class="col-auto">
                                        <input type="text" id="search-docs" name="keyword"
                                               class="form-control search-docs" placeholder="搜索">
                                    </div>
                                    <div class="col-auto">
                                        <button type="submit" class="btn app-btn-secondary">搜索</button>
                                    </div>
                                </form>
                            </div><!--//col-->
                            <div th:if="${user.getPerm().equals('admin')}" class="col-auto">
                                <a class="btn app-btn-primary" href="/ms/admin/add-good">
                                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-upload me-2"
                                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd"
                                              d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path>
                                        <path fill-rule="evenodd"
                                              d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"></path>
                                    </svg>
                                    新增货物
                                </a>
                            </div>
                        </div><!--//row-->
                    </div><!--//table-utilities-->
                </div><!--//col-auto-->
            </div><!--//row-->

            <div class="row g-4" id="list">
                <div th:each="good : ${goods}" th:style="${goodStat.index < 12 ? '' : 'display: none'}"
                     class="col-6 col-md-4 col-xl-3 col-xxl-2">
                    <div class="app-card app-card-doc shadow-sm h-100">
                        <div class="app-card-thumb-holder p-3">
                            <div class="app-card-thumb">
                                <img class="thumb-image" th:src="${good.getFace()}" alt="">
                            </div>
                            <span class="badge bg-success"
                                  th:text="${good.getType()}"></span>
                        </div>
                        <div class="app-card-body p-3 has-card-actions">
                            <h4 class="app-doc-title truncate mb-0">
                                <a th:text="${good.getName()}"></a>
                            </h4>
                            <div class="app-doc-meta">
                                <ul class="list-unstyled mb-0">
                                    <li th:text="'商品号: ' + ${good.getGid()}"></li>
                                    <li th:text="'原价: ' + ${good.getPrice()} + '元'"
                                        th:style="${user.getPerm().equals('vip') ? 'text-decoration: line-through' : ''}"></li>
                                    <li th:if="${user.getPerm().equals('vip')}"
                                        th:text="'折扣价: ' + ${good.getPrice() * 0.9} + '元'"
                                        style="color: red"></li>
                                    <li th:text="'数量: ' + ${good.getCount()}"></li>
                                </ul>
                                <input th:if="${!user.getPerm().equals('admin')}" type="number"
                                       th:id="${good.getGid()} + '_count'"
                                       placeholder="购买数量" min="1">
                            </div><!--//app-doc-meta-->

                            <div class="app-card-actions">
                                <div class="dropdown">
                                    <div class="dropdown-toggle no-toggle-arrow" data-bs-toggle="dropdown"
                                         aria-expanded="false">
                                        <svg width="1em" height="1em" viewBox="0 0 16 16"
                                             class="bi bi-three-dots-vertical" fill="currentColor"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                  d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                        </svg>
                                    </div><!--//dropdown-toggle-->
                                    <ul class="dropdown-menu">
                                        <li th:if="${!user.getPerm().equals('admin')}">
                                            <a class="dropdown-item" style="cursor: pointer;"
                                               th:onclick="'buyGood(' + ${user.getUid()} + ', ' + ${good.getGid()} + ')'">
                                                <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                                                     class="bi bi-pencil me-2" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M16 6H8C6.89543 6 6 6.89543 6 8V16" stroke="#333"
                                                          stroke-width="4" stroke-linecap="round"
                                                          stroke-linejoin="round"/>
                                                    <path d="M16 42H8C6.89543 42 6 41.1046 6 40V32" stroke="#333"
                                                          stroke-width="4" stroke-linecap="round"
                                                          stroke-linejoin="round"/>
                                                    <path d="M32 42H40C41.1046 42 42 41.1046 42 40V32" stroke="#333"
                                                          stroke-width="4" stroke-linecap="round"
                                                          stroke-linejoin="round"/>
                                                    <path d="M32 6H40C41.1046 6 42 6.89543 42 8V16" stroke="#333"
                                                          stroke-width="4" stroke-linecap="round"
                                                          stroke-linejoin="round"/>
                                                    <path d="M24 16V32" stroke="#333" stroke-width="4"
                                                          stroke-linecap="round" stroke-linejoin="round"/>
                                                    <path d="M32 16V32" stroke="#333" stroke-width="4"
                                                          stroke-linecap="round" stroke-linejoin="round"/>
                                                    <path d="M16 16V32" stroke="#333" stroke-width="4"
                                                          stroke-linecap="round" stroke-linejoin="round"/>
                                                </svg>
                                                购买
                                            </a>
                                        </li>
                                        <li th:if="${user.getPerm().equals('admin')}">
                                            <a class="dropdown-item"
                                               th:href="'/ms/admin/modify-good?gid=' + ${good.getGid()}">
                                                <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                     class="bi bi-pencil me-2"
                                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                    <path fill-rule="evenodd"
                                                          d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                                                </svg>
                                                编辑
                                            </a>
                                        </li>
                                        <li th:if="${user.getPerm().equals('admin')}">
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li th:if="${user.getPerm().equals('admin')}">
                                            <a class="dropdown-item"
                                               style="cursor: pointer"
                                               th:onclick="'deleteGood(' + ${good.getGid()} + ')'">
                                                <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                     class="bi bi-trash me-2"
                                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                                    <path fill-rule="evenodd"
                                                          d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                                </svg>
                                                删除
                                            </a>
                                        </li>
                                    </ul>
                                </div><!--//dropdown-->
                            </div><!--//app-card-actions-->
                        </div><!--//app-card-body-->
                    </div><!--//app-card-->
                </div><!--//col-->
            </div><!--//row-->

            <nav class="app-pagination mt-5">
                <ul class="pagination justify-content-center" id="pager"></ul>
            </nav><!--//app-pagination-->
        </div><!--//container-fluid-->
    </div><!--//app-content-->

</div><!--//app-wrapper-->

<!-- Javascript -->
<script src="/assets/plugins/popper.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Page Specific JS -->
<script src="/assets/js/app.js"></script>
<script type="text/javascript">
    function buyGood(uid, gid) {
        var order = {}
        order['uid'] = uid
        var count = parseInt(document.getElementById(gid + '_count').value)
        if (count <= 0) {
            alert('至少购买一件商品')
            return
        }
        $.ajax({
            url: '/ms/api/good/' + gid,
            method: 'get',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (good) {
                if (count > good['count']) {
                    alert('剩余商品不足, 无法购买!')
                    return
                }
                order['content'] = JSON.stringify(good)
                order['price'] = good['price']
                order['type'] = 'good'
                order['count'] = count
                order['time'] = new Date()
                $.ajax({
                    url: '/ms/api/order/',
                    method: 'post',
                    data: JSON.stringify(order),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    success: function (result) {
                        if (result['success']) location.reload()
                        else alert('购买失败')
                    },
                    error: function () {
                        alert('购买失败')
                    }
                })
            }
        })
    }

    function deleteGood(gid) {
        $.ajax({
            url: '/ms/api/good/' + gid,
            method: 'delete',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('删除失败')
            }
        })
    }
</script>
</body>
</html> 
